<template>
  <div class="lx-love__wrap">
    <div class="lx-love__header">
      <img class="lx-love__image" :src="love.bgCover" />
      <div class="lx-love__info">
        <div>
          <img class="lx-love__avatar" :src="love.manCover" />
          <div class="lx-love__title">{{ love.manName }}</div>
        </div>
        <div>
          <img class="lx-love__heart" :src="love.heart" alt="心心" />
        </div>
        <div>
          <img class="lx-love__avatar" :src="love.womanCover" />
          <div class="lx-love__title">{{ love.womanName }}</div>
        </div>
      </div>
      <div class="lx-love__wave">
        <banner-wave :arrow="false" />
      </div>
    </div>
    <div class="lx-love__content">
      <div class="love-content">
        <!-- 计时 -->
        <div class="lx-love__time-list">
          <div class="love-time-title1">这是我们一起走过的</div>
          <div class="love-time1">
            第
            <span class="love-time1-item">{{ timeLen.year }}</span>
            年
            <span class="love-time1-item">{{ timeLen.month }}</span>
            月
            <span class="love-time1-item">{{ timeLen.day }}</span>
            日
            <span class="love-time1-item">{{ timeLen.hour }}</span>
            时
            <span class="love-time1-item">{{ timeLen.minute }}</span>
            分
            <span class="love-time1-item">{{ timeLen.second }}</span>
            秒
          </div>
        </div>
        <!-- 倒计时 -->
        <!-- <div class="love-time-title2">中秋国庆长假:12天4时28分</div> -->
      </div>
      <middle-card />
      <div class="lx-love__weiyan">
        <tree-card-list />
        <time-line />
        <photo-list />
        <message-board />
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import BannerWave from "@/components/BannerWave.vue";
import MiddleCard from "./MiddleCard.vue";
import TreeCardList from "./TreeCardList.vue";
import TimeLine from "./TimeLine.vue";
import PhotoList from "./PhotoList.vue";
import MessageBoard from "./MessageBoard.vue";
import { useLove } from "./hooks/useLove";
const { love, timeLen } = useLove();
</script>
<style lang="scss" scoped>
.lx-love__wrap {
  width: 100%;
  min-height: 100%;
}
.lx-love__header {
  width: 100%;
  height: 55vh;
  position: relative;
  overflow: hidden;
}
.lx-love__image {
  width: 100%;
  height: 100%;
  z-index: -1;
  display: inline-block;
  object-fit: cover;
  &::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.15);
  }
}

.lx-love__info {
  width: 90%;
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.1);
  max-width: 950px;
  border-radius: 3em;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 50px 70px 30px 70px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.lx-love__avatar {
  border: rgba(255, 255, 255, 0.2) 4px solid;
  width: 180px;
  height: 180px;
  object-fit: cover;
  border-radius: 50%;
}

.lx-love__title {
  margin-top: 15px;
  text-align: center;
  font-size: 25px;
  font-weight: 700;
  color: #fff;
}

.lx-love__heart {
  animation: imgScale 2s linear infinite;
  width: 120px;
  height: 120px;
}
.lx-love__wave {
  width: 100%;
  position: absolute;
  bottom: 0;
  height: 84px;
}

.love-time-title1 {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0.2rem;
  line-height: 4rem;
  text-align: center;
  background-image: linear-gradient(
    270deg,
    #ff4500,
    #ffa500,
    #ffd700,
    #90ee90,
    #00ffff,
    #1e90ff,
    #9370db,
    #ff69b4,
    #ff4500
  );
  background-clip: text;
  animation: jianBian 60s linear infinite;
  color: rgba(0, 0, 0, 0);
}

.love-time-title2 {
  text-align: center;
  font-size: 1.5rem;
  line-height: 4rem;
  font-weight: 600;
  letter-spacing: 2px;
}

.love-time1 {
  text-align: center;
  font-size: 2rem;
  font-weight: 700;
}

.love-time1-item {
  font-size: 4rem;
  font-weight: 700;
}
.x-love__weiyan {
  padding: 0 20px;
}
</style>
